@import url('~@/styles/mixin.less');

.groupData {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;

    &_item {
        flex-direction: column;
        width: 339px;
        height: 170px;
        color: #fff;
        font-weight: 400;
        font-size: 46px;
        border-radius: 16px;
        .flex(center,center);

        label {
            margin-bottom: 8px;
            font-size: 30px;
            line-height: 42px;
        }

        div {
            width: 210px;
            span {
                display: block;
                color: #fff;
                font-weight: bold;
                font-size: 48px;
                line-height: 58px;
                text-align: center;
                .ellipsis();
            }
        }

        &:nth-child(1) {
            background: url('~@/static/home/group_data_0.png') no-repeat;
            background-size: cover;
            box-shadow: 0 8px 24px 0 rgba(55, 202, 196, 0.5);
        }
        &:nth-child(2) {
            background: url('~@/static/home/group_data_1.png') no-repeat;
            background-size: cover;
            box-shadow: 0 8px 24px 0 rgba(254, 164, 2, 0.5);
        }
        &:nth-child(3) {
            background: url('~@/static/home/group_data_2.png') no-repeat;
            background-size: cover;
            box-shadow: 0 8px 24px 0 rgba(124, 149, 235, 0.5);
        }
        &:nth-child(4) {
            background: url('~@/static/home/group_data_3.png') no-repeat;
            background-size: cover;
            box-shadow: 0 8px 24px 0 rgba(254, 120, 133, 0.5);
        }
    }
}
